<template>
	<view class="object_page" :style="{ 'padding-bottom': pageType == 2 ? '30rpx' : '' }">
		<!-- 家长端 -->
		<view class="patriarch">
			<view class="send_object">
				<!-- 任务完成状态过滤 -->
				<view v-if="pageType==1" class="status_list">
					<view :class="{status_item:true,'active_status':i.status===activeStatus}"
						v-for="(i,idx) in taskStatusOpt" :key="idx" @click="filterStatus(i)">
						<text>{{i.text}}</text>
						<image class="active_icon" src="@/static/tabs/xia.png" v-show="i.status===activeStatus" mode="">
						</image>
					</view>
				</view>
				<status-page v-if="pageStatus === 'empty'" :status="pageStatus" customEmptyText="暂无内容"
					:fixed="false"></status-page>
				<view v-else class="object_item" :style="{'margin-top':pageType == 2 ? '30rpx' : '16rpx'}"
					v-for="(i, idx) in childrenList" :key="idx">
					<view class="left">
						<template v-if="pageType==1">
							<view v-if="i.status===0&&taskType===1" class="label" @click="handleSingleCheck(i)">
								<image v-if="i.checked" class="checked" src="@/static/iconPicture/checked.png" mode="">
								</image>
								<text v-else class="checkbox"></text>
							</view>
						</template>
						<view v-else class="label" @click="handleSingleCheck(i)">
							<image v-if="i.checked" class="checked" src="@/static/iconPicture/checked.png" mode="">
							</image>
							<text v-else class="checkbox"></text>
						</view>
						<view class="name">{{ i.stuName }}</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="pageType == 2" class="footer">
			<button class="cancel" @click="handleCancel">取消</button>
			<button class="confirm" @click="handleConfirm">确认</button>
		</view>
		<CustomPopup titleText="完成提示" v-model="showFinishPopup" @handleConfirmBtn="handleConfirmFinish"
			@handleCancelBtn="handleCancelFinish">
			<view class="popup_box">是否确认完成？</view>
		</CustomPopup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import CustomPopup from "@/pages/subpackage/home/Components/CustomPopup/CustomPopup.vue";
	import {
		getPatriarchStuInfoApi,
		getFamilyTaskStuApi,
		updateTaskStatusApi
	} from "@/api";
	const pageStatus = ref('')
	const taskType = ref() // 任务类型 0-系统任务 1-自定义任务
	const taskStatusOpt = ref([{
		status: 0,
		text: '进行中'
	}, {
		status: 1,
		text: '已完成'
	}])
	const activeStatus = ref(0)
	const taskStatusInfo = ref({
		taskId: '',
		status: 0
	})
	const showFinishPopup = ref(false)

	const checkedList = ref([]); // 选中值

	const pageType = ref(); // 1查看 2编辑
	const childrenList = ref([]); // 家长孩子

	// 完成状态过滤
	function filterStatus(i) {
		taskStatusInfo.value.status = i.status
		activeStatus.value = i.status
		fetchStudentTaskStatus()

	}
	// 单选
	function handleSingleCheck(i) {
		let id = pageType.value == 1 ? i.stuId : i.smartUserIdentifier
		if (pageType.value == 1) {
			taskStatusInfo.value.status = 1
			showFinishPopup.value = true
		}
		i.checked = !i.checked;
		if (i.checked) {
			checkedList.value.push(id);
		} else {
			checkedList.value.splice(checkedList.value.indexOf(id), 1);
		}
		
	}

	// 确认完成
	async function handleConfirmFinish() {
		uni.showLoading({
			title: '正在完成...'
		})
		let res = await updateTaskStatusApi({
			...taskStatusInfo.value,
			stuIdList: checkedList.value
		})
		uni.hideLoading()
		if (res.code === 200) {
			uni.showToast({
				icon: 'none',
				title: '已完成'
			})
			taskStatusInfo.value.status = 0
			fetchStudentTaskStatus()
			showFinishPopup.value = false
		}
	}
	// 取消完成
	function handleCancelFinish() {
		checkedList.value = []
		childrenList.value = childrenList.value.map(item => {
			return {
				...item,
				checked: false
			}
		})
	}


	// 获取家长孩子数据
	async function fetchChildrenInfo() {
		uni.showLoading({
			title: "加载中...",
		});
		let res = await getPatriarchStuInfoApi();
		if (res.code === 200) {
			for (let i in res.data) {
				childrenList.value.push({
					...res.data[i],
					checked: checkedList.value.includes(res.data[i].smartUserIdentifier)
				})
			}
			pageStatus.value = childrenList.value.length === 0 ? 'empty' : ''

		}
		uni.hideLoading();
	}
	// 学生完成情况
	async function fetchStudentTaskStatus() {
		uni.showLoading({
			title: "加载中...",
		});
		let res = await getFamilyTaskStuApi({
			...taskStatusInfo.value
		})
		uni.hideLoading();
		if (res.code === 200) {
			childrenList.value = res.data
		}
		pageStatus.value = childrenList.value.length === 0 ? 'empty' : ''
	
	}

	// 确认
	function handleConfirm() {
		uni.$emit("updateTaskSendObject", {
			list: JSON.stringify(checkedList.value),
		});
		uni.navigateBack();
	}
	// 取消
	function handleCancel() {
		checkedList.value = [];
		uni.navigateBack();
	}

	onLoad((option) => {
		pageType.value = option.pageType;
		uni.setNavigationBarTitle({
			title: pageType.value == 1 ? "发送对象" : "选择发送对象",
		});
		if (pageType.value == 1) {
			// 查看
			let details = JSON.parse(decodeURIComponent(option.details))
			taskType.value = details.customTask
			taskStatusInfo.value.taskId = details.id
			fetchStudentTaskStatus()
		} else {
			checkedList.value = JSON.parse(option.checkedList)
			fetchChildrenInfo();
		}
	});
</script>

<style lang="scss" scoped>
	.object_page {
		.teacher {
			.tab_fixed {
				position: fixed;
				top: 0;
				z-index: 1;
			}

			.more_checked {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx 24rpx 30rpx;
				background-color: #fff;
				box-sizing: border-box;
			}

			.all {
				display: block;
				margin: 0 8rpx 0 0;
				color: #333;
				font-size: 30rpx;
				font-weight: 500;
			}

			.all_checked {
				color: #615dff;
			}

			.filter_box {
				margin-bottom: 16rpx;
			}

			.class_more_checked {
				display: flex;
				align-items: center;
				padding: 30rpx 0 0 0;
			}
		}

		.label {
			width: 30rpx;
			height: 30rpx;
			margin-right: 16rpx;

			.checkbox {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 6rpx;
				border: 1rpx solid #ddd;
				box-sizing: border-box;
			}

			.checked {
				display: block;
				width: 100%;
				height: 100%;
			}

			.disabled_check {
				background-color: #f9f9fb;
			}
		}

		.send_object {
			.status_list {

				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;

				.status_item {
					display: inline-block;
					padding: 12rpx 18rpx;
					border-radius: 10rpx;
					background-color: #F9F9FB;
					color: #333333;
					font-size: 30rpx;
					line-height: 42rpx;

					&:first-child {
						margin-right: 100rpx;
					}
				}

				.active_status {
					position: relative;
					background-color: #615DFF;
					color: #FFFFFF;

					.active_icon {
						position: absolute;
						bottom: -14rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 35rpx;
						height: 20rpx;
					}
				}
			}

			.tip {
				display: flex;
				justify-content: flex-end;
				padding-top: 30rpx;

				&_icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.object_item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				background-color: #fff;
				padding: 36rpx 30rpx;
				border-bottom: 1rpx solid #eeeeee;
				box-sizing: border-box;
				color: #333;
				font-size: 30rpx;


				&:last-child {
					border-bottom: none;
				}

				.left {
					display: flex;
					align-items: center;
				}

				.right {
					font-size: 30rpx;

					.revocation {
						margin-right: 16rpx;
						color: #ff2828;
					}

					.unread {
						color: #615dff;
					}

					.been {
						color: #a9aab5;
					}
				}

				.name {
					line-height: 42rpx;
				}
			}
		}

		.footer {
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 16rpx 0 0 0;
			width: 100%;
			height: 172rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-top: 1rpx solid #eee;

			button::after {
				border: none;
			}

			.cancel {
				width: 230rpx;
				height: 90rpx;
				color: #615dff;
				background-color: #ececff;
			}

			.confirm {
				margin-left: 20rpx;
				height: 90rpx;
				width: 440rpx;
				color: #fff;
				background-color: #615dff;
			}
		}

		.popup_box {
			margin: 50rpx 0;
			box-sizing: border-box;
		}
	}
</style>